<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Kitware Demo Server">
    <meta name="author" content="Kitware">
    <link rel="icon" href="/_/favicon.png">

    <title>Kitware Web demos</title>

    <!-- Bootstrap core CSS -->
    <link href="/_/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/_/assets/custom.css" rel="stylesheet">
  </head>

  <body>

    <header>
      <div class="navbar navbar-dark bg-dark">
        <div class="container d-flex justify-content-between">
          <a href="/" class="navbar-brand">
            <img style="height: 50px;" src="/_/assets/kitware.svg" alt="Kitware, Inc." data-height-percentage="60" data-actual-width="300" data-actual-height="78">
          </a>
        </div>
      </div>
    </header>

    <main role="main">

      <section class="container title-separator">
        <h2 class="jumbotron-heading text-left ">
          <img style="height: 2rem;" src="/_/assets/ParaViewWeb.png" alt="ParaViewWeb">
        </h2>
      </section>

      <section class="container text-muted">
        <p class="category-text">
          ParaViewWeb, is a Web framework to build applications with interactive scientific visualization inside the Web browser. Those applications can leverage a VTK and/or ParaView backend for large data  processing and rendering.
        </p>
      </section>


      <div class="text-muted">
        <div class="container">
          <div class="row">
            <div class="card" style="width: 50%;" data-link-location="visualizer">
              <h2 class="jumbotron-heading text-center">
                <img style="height: 2.5rem" src="/_/assets/visualizer-logo.png" alt="ParaViewWeb - Visualizer">
              </h2>
              <img style="width: 100%;" src="/_/assets/visualizer.jpg" alt="ParaViewWeb - Visualizer">
              <p class="card-text">
                The ParaView-like application in the web, which can be used standalone or as a component with another web context.
              </p>
            </div>
            <div class="card" style="width: 50%;" data-link-location="divvy/?file=disk_out_ref.ex2">
              <h2 class="jumbotron-heading text-center" style="color: #444;">
                <img style="height: 2.5rem" src="/_/assets/divvy-logo.png" alt="ParaViewWeb - Divvy">
              </h2>
              <img style="width: 100%;" src="/_/assets/divvy.jpg" alt="ParaViewWeb - Divvy">
              <p class="card-text">
                Divvy is a ParaViewWeb application showing interconnected data visualization components in common workbench.
              </p>
            </div>
            <div class="card" style="width: 50%;" data-link-location="lite">
              <h2 class="jumbotron-heading text-center">
                <img style="height: 2.5rem;" src="/_/assets/pv-lite-logo.png" alt="ParaView - Lite">
              </h2>
              <img style="width: 100%;" src="/_/assets/pv-lite.jpg" alt="ParaView - Lite">
              <p class="card-text">
                Scientific Visualization application for tailored post-processing relying on a ParaViewWeb backend.
              </p>
            </div>
            <div class="card" style="width: 50%;" data-link-location="glance">
              <h2 class="jumbotron-heading text-center">
                <img style="height: 2.5rem;" src="/_/assets/pv-glance.png" alt="ParaView Glance">
              </h2>
              <img style="width: 100%;" src="/_/assets/pv-glance-vessel.jpg" alt="ParaView Glance">
              <p class="card-text">
                ParaView Glance aims to provide a general visualization application on the Web using vtk.js
              </p>
            </div>
          </div>
        </div>
      </div>
    </main>

    <script src="/_/js/jquery-slim.min.js"></script>

    <script type="text/javascript">
      function handleCellClick(evt) {
        let el = evt.target;
        while (!el.getAttribute('data-link-location')) {
          el = el.parentNode;
        }
        window.location = el.getAttribute('data-link-location');
      }
      var clickableCells = document.querySelectorAll('.card');
      for (var i = 0; i < clickableCells.length; i += 1) {
        clickableCells[i].style.cursor = 'pointer';
        clickableCells[i].addEventListener('click', handleCellClick);
      }
    </script>
    <script src="/_/js/bootstrap.min.js"></script>
  </body>
</html>
